<template>
  <div class="app-container">
    <div class="search-container">
      <el-form v-show="showSearch" ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-form-item v-if="!userInfo.orgId" label="所属机构">
          <select-org-tree :value="queryParams.orgId" @orgNodeClick="orgNodeClick"/>
        </el-form-item>
        <el-form-item label="产品类别" prop="materialStyle">
          <el-select v-model="queryParams.materialStyle" class="width-120" clearable placeholder="请选择消耗品产品类别">
            <el-option
              v-for="dict in dictDataMap['MATERIAL_STYLE']"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="全成本分类" prop="htcaClass">
          <el-select v-model="queryParams.htcaClass" class="width-120" clearable placeholder="请选择全成本分类">
            <el-option
              v-for="dict in dictDataMap['COST_CLASS']"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="消耗品名称" prop="materialName">
          <el-input
            v-model="queryParams.materialName"
            clearable
            placeholder="消耗品名称、编码、拼音"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
  
        <el-form-item label="耗材来源" prop="materialSource">
          <el-select v-model="queryParams.materialSource" class="width-120"
                     clearable placeholder="请选择耗材来源">
            <el-option
              v-for="dict in dictDataMap['material_source']"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPerm="['material:materialInfo:add']"
          plain
          type="primary"
          @click="handleAdd"
        >
          <template
            #icon>
            <i-ep-plus/>
          </template>
          新增
        </el-button>
      </el-col> 
      <el-col :span="1.5">
        <el-button
          v-hasPerm="['material:materialInfo:remove']"
          :disabled="multiple"
          plain
          type="danger"
          @click="handleDelete"
        >
          <template #icon>
            <i-ep-delete/>
          </template>
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPerm="['material:materialInfo:export']"
          plain
          type="warning"
          @click="handleExport"
        >
          <template #icon>
            <i-ep-download/>
          </template>
          导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-adaptive :border="true" :data="materialInfoList" :header-cell-style="$headerCellStyle"
              :stripe="true" highlight-current-row >

      <el-table-column :align="'center'" label="消耗品产品类别" prop="materialStyle">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['MATERIAL_STYLE']" :value="scope.row.materialStyle"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="全成本分类" prop="htcaClass">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['COST_CLASS']" :value="scope.row.htcaClass"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="型号" prop="materialModel"/>
      <el-table-column :align="'center'" label="材质" prop="materialIndicator"/>
      <el-table-column :align="'center'" label="消耗品名称" fixed="left" prop="materialName"/>
      <el-table-column :align="'center'" label="消耗品别名" fixed="left" prop="materialNameAlias"/>
      <el-table-column :align="'center'" label="消耗品拼音码" fixed="left" prop="materialInput"/>
      <el-table-column :align="'center'" label="消耗品编码" prop="materialCode"/>
      <el-table-column :align="'center'" label="消耗品编码" prop="sysMaterialCode"/>
      <el-table-column :align="'center'" label="条形码" prop="barCode"/>
      <el-table-column :align="'center'" label="基本数量" prop="minNum"/>
      <el-table-column :align="'center'" label="规格" prop="minSpec"/>
      <el-table-column :align="'center'" label="单位" prop="minUnits">
      <template #default="scope">
          <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.minUnits"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="包装数量" prop="packageNum"/>
      <el-table-column :align="'center'" label="包装规格" prop="packageSpec"/>
      <el-table-column :align="'center'" label="包装单位" prop="packageUnit">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.packageUnit"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="供应商名称" prop="supplierName" width="200px"/>
      <el-table-column :align="'center'" label="厂家名称" prop="firmName" width="220px"/>
      <el-table-column :align="'center'" label="耗材来源" prop="materialSource">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['material_source']" :value="scope.row.materialSource"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="批准文号" prop="passNo"/>
      <el-table-column :align="'center'" label="产品编号" prop="materialItemNo"/>
      <el-table-column :align="'center'" label="产品备案号" prop="goodsRecordNo"/>
      <el-table-column :align="'center'" label="生产许可证号" prop="produceLicenseNo"/>
      <el-table-column :align="'center'" label="卫生许可证号" prop="hygieneLicenseNo"/>
      <el-table-column :align="'center'" label="产品技术要求编号" prop="technologyRequireNo"/>
      <el-table-column :align="'center'" label="医疗器械注册证号" prop="medicalDeviceRegistNo"/>
      <el-table-column :align="'center'" label="执行标准" prop="executeStandardNo"/> 
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="招采标志" prop="isPurchase">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.isPurchase"/>
        </template>
      </el-table-column> 
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="自费或医保" prop="zfOrYb">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['is_medical_insurance']" :value="scope.row.zfOrYb"/>
        </template>
      </el-table-column> 
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="GMP标识" prop="gmp">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.gmp"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="国家医保名称" prop="countryYbName" width="200px"/>
      <el-table-column :align="'center'" label="国家医保编码" prop="countryYbCode" width="200px"/>
      
      <el-table-column :align="'center'" class-name="small-padding fixed-width" fixed="right" label="操作" width="180px">
        <template #default="scope">
          <el-button
            v-hasPerm="['material:materialInfo:edit']"
            type="success"
            @click="handleUpdate(scope.row)">
            <template #icon>
              <i-ep-edit/>
            </template>
            修改
          </el-button>
          <el-button
            v-hasPerm="['material:materialInfo:remove']"
            type="danger"
            @click="handleDelete(scope.row)">
            <template #icon>
              <i-ep-delete/>
            </template>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
    <material-add ref="materialAddRef" :drug-type-options="drugTypeOptions" :org-id="queryParams.orgId"
              @get-list-parent="getList()"/>
    <!-- 添加或修改消耗品material_info对话框 -->
    
  </div>
</template>
<script lang="ts">
export default {
  name: "MaterialInfo"
}
</script>

<script lang="ts" setup>
import {
  delMaterialInfo,
  getMaterialInfo,
  selectPageMaterialInfo
} from "@/api/material/materialInfo";
import materialAdd from "./materialAdd.vue";
import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user";

const useUserStore = useUserStoreHook();

const {proxy} = getCurrentInstance() as any;

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('clinic_or_visit', 'material_source', 'COST_CLASS', 
  'sys_yes_no', 'MATERIAL_STYLE','is_medical_insurance','spec_unit'))


const userInfo = <UserInfoBusi>useUserStore.user.userInfo
  
const formRef = ref();
const queryParamsRef = ref()
const materialInfoList = ref([]);
const open = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const materialAddRef = ref();

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  orgId: userInfo.orgId,
  materialStyle: '',
  htcaClass: '',
  materialName: '',
})


if (userInfo.orgId) {
  queryParams.value.orgId = userInfo.orgId
  getList()
}

// 机构树点击事件
function orgNodeClick(data, _e) {
  queryParams.value.orgId = data.orgId
  getList()
}

/** 查询消耗品material_info列表 */
function getList() {
  selectPageMaterialInfo(queryParams.value).then((response: any) => {
    materialInfoList.value = response.rows;
    total.value = response.total;
  });
}





/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  // proxy.resetForm("queryRef");
  handleQuery();
}

 

/** 新增按钮操作 */
function handleAdd() {
  if (!queryParams.value.orgId) {
    return ElMessage.error("请先选择机构")
  }
  materialAddRef.value.handleAdd()
}

/** 修改按钮操作 */
function handleUpdate(row) {
  materialAddRef.value.handleUpdate(row)
}



/** 删除按钮操作 */
function handleDelete(row) {
  const _materialInfoIds = row.materialInfoId ||
    ids.value;
  ElMessageBox.confirm('是否确认删除消耗品material_info编号为"' + _materialInfoIds + '"的数据项？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    delMaterialInfo(_materialInfoIds).then(() => {
      getList();
      ElMessage.success("删除成功");
    })
  }).catch(() => {
  })
}


/** 导出按钮操作 */
function handleExport() {
  proxy.download('material/materialInfo/export', {
    ...queryParams.value
  }, `materialInfo_${new Date().getTime()}.xlsx`)
}
 
</script>
